<style lang="scss" scoped>
</style>

<template>
  <common-page-template :hasPage="false" :hasTable="false">
    <!-- <template #search>
      <module-search @submit="handleSubmit" />
    </template> -->
    <template #btns>
      <el-button @click="showModal('add')" type="primary">新增模块</el-button>
      <!-- <el-button type="danger">删除</el-button> -->
    </template>
    <el-table
      :data="pageData.data"
      style="width: 100%; margin-top: 20px"
      row-key="mid"
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="mname" label="模块" width="220">
      </el-table-column>
      <el-table-column
        prop="level"
        align="center"
        label="level"
        width="80"
      />
      <el-table-column
        prop="path"
        align="center"
        label="API路由"
        minWidth="180"
      />
      <el-table-column
        prop="router"
        align="center"
        label="前端路由"
        minWidth="180"
      />
      <el-table-column align="center" label="操作" width="220">
        <template #default="scope">
          <el-button v-if="scope.row.level < 3" @click="showModal('addChild', scope.row)" type="primary" size="small">新增</el-button>
          <el-button @click="showModal('edit', scope.row)" type="danger" size="small">编辑</el-button>
          <el-popconfirm title="确认删除该模块?" @confirm="confirmDelete([scope.row.mid])">
            <template #reference>
              <el-button type="info" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <add-module-modal
      width="700px"
      :title="titleMap[optType]"
      :type="optType"
      :curForm="curForm"
      v-model:show="showAddModal"
      @success="handleSubmit"
    />
  </common-page-template>
</template>

<script setup>
import { ref, reactive, h, onMounted } from "vue";
import ModuleSearch from "./component/ModuleSearch.vue";
import AddModuleModal from "./component/AddModuleModal.vue";
import { ModuleQuery, ModuleDelete } from "@/apis/module";
import CommonOptionBtns from "@/components/commonOptionBtns.vue";
import { ElMessage } from 'element-plus'
// 新增 编辑 删除 启用 禁用 同步角色模块
const titleMap = {
  'add': '新增模块',
  'addChild': '新增子模块',
  'edit': '编辑模块'
}
const curForm = ref('')
const showAddModal = ref(false);
const optType = ref("add");
import usePage from "@/hooks/usePage";
const { pageData, handleQuery } = usePage(ModuleQuery);
const handleSubmit = (formData = {}) => {
  pageData.formData = formData;
  handleQuery();
};

onMounted(() => {
  handleSubmit();
});

const showModal = (type, forms = '') => {
  optType.value = type;
  curForm.value = forms
  if (type === 'addChild') {
    curForm.value = {
      level: forms.level + 1,
      pmid: forms.mid,
      mid: ''
    }
  }
  showAddModal.value = true;
};

const confirmDelete = async (midList) => {
  await ModuleDelete({ midList })
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
  handleSubmit()
}
</script>

